<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="utf-8">
		<title>index</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="referrer" content="never" />
		<link rel="stylesheet" href="../../../../css/mui.min.css">
		<link rel="stylesheet" href="../../static/css/common.css">
		<link rel="stylesheet" href="../../static/components/components.css" />	
		<style>
			.mui-bar-nav ~ .mui-content .mui-pull-top-pocket{
				top:86px !important;
			}
			.search-model{
				width: 78vw;
			}
			.top{
				
				display: flex;
				align-items: center;
				padding: 10px 10px 0 10px;
				position: sticky;
				top: 44px;
				background: #efeff4;
				z-index: 11;
			}
				.mui-search .mui-placeholder .mui-icon{
				margin-right: 14%;
			}		
			.terminalwork-list-receivebtn{
				position:absolute;
				right:2vw;
				top:50%;
				width:12vw;
				height:6vw;
				margin-top:-3vw;
				box-sizing: border-box;
				border:1px solid #004A86;
				border-radius:5vw;
				text-align:center;
				line-height:6vw;
				font-size:3.5vw !important;
				color:#004a86 !important;
				padding: 0;
			}
		</style>
	</head>

	<body>
		
		<header class="mui-bar mui-bar-nav mui-bar-nav-bg">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 id="title" class="mui-title">钥匙借用/归还</h1>
			<span class="mui-icon mui-icon-right-nav mui-pull-right right-titleicon">
				+
			</span>
		</header>
		<div class="mui-content" id="content" v-cloak>
			<div class="top"> 
				<transition name="fade">
					<div class="drop-menulist" v-if="showMenu"> 
						<div @click="menuClick(item)" v-for="(item,index) in menuList" :key="index">
							{{item.name}}
							<img v-if="item.name=='我值班' && onStatus" src="../../../../img/post.png" class="icon-onwork" alt="">
						</div>
					</div>
				</transition>
					<div class="search-model">
						<div class="mui-input-row mui-search">
							<input v-model="keyWords" @input="onChange" type="search"  class="mui-input-clear" style="background-color: #fff;" placeholder="请输入钥匙信息等">
						</div>
					</div>
					<div class="top-textall">
						<span @click="changeFliter('unreturn')" v-if="filterText == 'all'">已借用</span>
						<span  @click="changeFliter('return')" v-if="filterText == 'unreturn'">未归还</span>
						<span  @click="changeFliter('all')" v-if="filterText == 'return'">已归还</span>
					</div>
				
			</div>
			<div id="scroll">
				<div class="list" id="list">		
					<div v-for="(item,index) in list" :key="index">
						<div class="flex-row" >
								<div class="label">钥匙信息:</div>
								<div>{{item.keyName || '暂未添加钥匙信息'}}</div>
						</div>
						<div class="flex-between">
							<div class="mt-10">
								<div class="flex-row"> 
									<div class="label">借用人:</div>
									<div>{{'['+item.operateStaffCode+']' + item.operateStaffName}}</div>
								</div>
								
								<div class="mt-10 flex-row">
									<div class="label">许可人:</div>
									<div class="over-txt">{{item.borrowDutyStaffName || ('['+ item.dutyStaffCode +']') + item.dutyStaffName}}</div>
								</div>
							</div>
							<button class="terminalwork-list-receivebtn" v-if="item.status == 1" @tap="goDetail(item)">
								详情
							</button>
							<button class="terminalwork-list-receivebtn"  v-if="item.status == 0" @tap="goEdit(item)">
								编辑
							</button>
						</div>
					</div>
					<p style="width:100%;height: 1px;"></p>
			  </div>	
			</div>
			<div class="popup-bg" v-if="showPop" @click="showPop = false">
				<div class="add-box"  @click.stop="clickStop">
					<div class="flex-row user-form">
						<div class="pop-label">值班人</div>
						<personselect :issingle="isSingle" ref="personselect" style="width:40vw;"></personselect>
					</div>
					<div class="pop-bottom">
						<div class="color-blue">确认</div>
						<div class="color-red" @click="showPop = false">取消</div>
					</div>
				</div> 
			</div>
			
		</div>
		
		<script src="../../../../js/mui.min.js"></script>
		<script src="../../../../js/vue.js"></script>
		<script src="../../static/components/personSelect.js"></script>
		<script src="../../static/js/neiosCommon.js"></script>  <!--公共js页面必需-->
		<script type="text/javascript" src="../../static/js/neiosRequst.js"></script>
		<script type="text/javascript" src="../../../../js/jquery-3.2.1.min.js"></script>
		<script src="js/index.js"></script>
		
	</body>

</html>